<template>
	<view class="personal-wrap">
		<view class="card">
			<view class="card-title">
				开通会员
				<text class="card-title-more">开通会员，享受更多会员权益</text>
			</view>
			<view class="card-con">
				<template v-for="(item, i) in vipList">
					<view v-if="item.label == '会员'" :key="i" class="vip-card">
						<view class="name">{{ item.name }}</view>
						<view class="price">{{ item.price }}</view>
						<view class="btn" @click="buy(item)">立即开通</view>
					</view>
				</template>
			</view>
		</view>
		<!-- <view class="card">
			<view class="card-title">
				开通代理
				<text class="card-title-more">开通代理，赚取更多收益</text>
			</view>
			<view class="card-con">
				<template v-for="(item, i) in vipList">
					<view v-if="item.label == '代理'" :key="i" class="vip-card agent">
						<view class="name">{{ item.name }}</view>
						<view class="con">
							<image class="icon" :src="$IMG_URL + '/imgs/user/agent.png'" mode="aspectFill"></image>
							<view class="buy">
								<view class="price">{{ item.price }}</view>
								<view class="btn" @click="buy(item)">成为代理</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view> -->
	</view>
</template>

<script>
	import wechat from '@/shopro/wechat/wechat'
	export default {
		components: {},
		data() {
			return {
				loading: false,
				paymentConfig: null,
				vipInfo: null,
				vipList: null,
			};
		},
		onShow() {
			this.$http('vip.index').then(res => {
				this.paymentConfig = res.data.config
				this.vipInfo = res.data.vipInfo
				this.vipList = []
				for (let item of res.data.vipList) {
					item.price = item.pricedata[0].price
					this.vipList.push(item)
				}
			})
		},
		methods: {
			buy(vip) {
				if (this.loading) {
					return
				}
				this.loading = true
				this.$http('vip.buy', {
					level: vip.level,
					days: vip.pricedata[0].days,
					paytype: this.paymentConfig.defaultpaytype,
					method: 'miniapp'
				}).then(res => {this.loading = false
					if (res.code === 1) {
						if (res.data === 'no_openid') {
							uni.showModal({
								title: '微信支付',
								content: '请先绑定微信再使用微信支付',
								success: function(res) {
									if (res.confirm) {
										wechat.bind()
									}
								},
							})
						}
						let that = this
						uni.requestPayment({
							provider: 'wxpay',
							...res.data,
							success: res => {
								uni.showModal({
									title: '开通成功',
									content: '您现在已经是' + vip.name,
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											this.jump('/pages/index/user')
										}
									},
								})
							},
							fail: err => {
								if (err.errMsg !== "requestPayment:fail cancel") {
									uni.showToast({
										title: '支付失败：' + err.errMsg,
										duration: 2000
									})
								}
							}
						});
						return false
					}
				}).catch(e => {
					this.loading = false
				})
			},
		}
	};
</script>

<style lang="scss">
	.card {
		margin: 24rpx;
		width: calc(100% - 48rpx);
		border-radius: 16rpx;
		background-color: #fff;
		padding: 36rpx 24rpx;

		&-title {
			display: flex;
			justify-content: space-between;
			justify-items: flex-end;
			width: 100%;
			font-size: 36rpx;
			color: #111111;

			&-more {
				font-size: 24rpx;
				color: #A7A5A5;
			}
		}

		&-con {
			margin-top: 32rpx;
			display: flex;
			flex-wrap: wrap;
		}
	}

	.vip-card {
		width: calc(33% - 12rpx);
		margin-right: 12rpx;
		margin-bottom: 12px;
		border-radius: 24rpx;
		background-color: #ffe9b7;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

		.name {
			display: inline-block;
			border-radius: 24rpx 0 24rpx 0;
			color: #ffffff;
			font-size: 30rpx;
			padding: 8rpx 16rpx;
			background-image: linear-gradient(to right, #ec6b1f, #f9b545);
		}

		.price {
			color: #323334;
			font-size: 44rpx;
			font-weight: 600;
			margin: 44rpx 0;
			text-align: center;

			&::before {
				content: "￥";
				font-size: 28rpx;
			}

			&::after {
				content: "元";
				font-size: 28rpx;
			}
		}

		.btn {
			background-color: #2a2a2a;
			color: #ebe6d9;
			font-size: 30rpx;
			text-align: center;
			padding: 12rpx;
			overflow: hidden;
			border-radius: 0 0 24rpx 24rpx;
		}

		&.agent {
			width: calc(50% - 12rpx) !important;

			.con {
				display: flex;
				justify-content: space-between;

				.icon {
					margin: 8rpx 16rpx;
					width: 106rpx;
					height: 106rpx;
				}
			}

			.buy {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin: 12rpx;

				.price {
					margin: 0;
				}

				.btn {
					border-radius: 24rpx;
					background-image: linear-gradient(to right, #ec6b1f, #f9b545);
				}
			}
		}
	}
</style>